import React, { Component } from 'react'

export default class App extends Component {

    state = {
        list: ['摇一摇', '晃一晃', '泡一泡', '扭一扭'],
        proList: [
            {
                name: '小米',
                list: [
                    'M1',
                    'M2',
                    'M15',
                    '6X'
                ]
            }, {
                name: '遥遥领先',
                list: [
                    'mate 10',
                    'mate 20',
                    'mate 30',
                    'mate 40',
                ]
            }, {
                name: '锤子',
                list: [
                    '锤 1',
                    '锤 2',
                    '锤 3',
                    '锤 4',
                ]
            }
        ]
    }

    render() {

        const str = this.state.list.map(item => <li key={item}>{item}</li>)

        const htmlList = this.state.proList.map(item => {
            return (<li key={item.name}>
                <h5>{item.name}</h5>
                {item.list.map(i => {
                    return <span key={i}>{i}</span>
                })}
            </li>)
        })

        return (
            <div>
                <h1>列表渲染</h1>
                <ol>
                    {/* 
                        在 react 中使用 map 进行列表渲染，返回的是一个组件模板
                        使用列表渲染的时候要添加一个 key 属性。不要在 jsx 中使用
                        for 循环系列的函数 (for/for in/for of)
                     */}
                    {this.state.list.map(item => <li key={item}>{item}</li>)}
                </ol>

                <hr />

                <ol>
                    {str}
                </ol>

                <hr />


                <ul>
                    {this.state.proList.map(item => (<li key={item.name}>
                        <h5>{item.name}</h5>
                        {
                            item.list.map(i => (<span key={i}>{i}</span>))
                        }
                    </li>))}
                </ul>

                <hr />

                <ul>
                    {htmlList}
                </ul>

            </div>
        )
    }
}
